<!DOCTYPE HTML>
<html>
<head>
    <title>样式</title>
<link rel="stylesheet" type="text/css" href="../CSS/CSS.css"></head>
<style type="text/css">

</style>
<body>
<p>下面是一些CSS的基本样式</p>
<fieldset><legend>颜色样式</legend>
    <div><span class="redb">color：</span>前景色
        <div>代码示例：&lt;span style="<span class="red">color: coral</span>"&gt;前景色&lt;/span&gt;　代码效果：<span style="color: coral">前景色</span></div></div>　
    <div><span class="redb">background-color：</span>背景色　
        <div>代码示例：&lt;span style='<span class="red">background-color:coral;</span>color:white'&gt;背景色&lt;/span&gt;　代码效果：<span style='background-color:coral;color:white;'>背景色</span></div></div>　
    <div><span class="redb">border：coral</span>边框色
        <div>代码示例：&lt;span style='<span class="red">border:</span> 1px solid<span class="red"> coral</span>'&gt;边框色&lt;/span&gt;　代码效果：<span style='border: 1px solid coral'>边框色</span></div></div>
</fieldset>
<br/>
<fieldset><legend>字体样式</legend>
    <div><span class="redb">font-weight:bold</span>：字体加粗
        <div>代码示例：&lt;span style="<span class="red">font-weight:bold</span>"&gt;字体加粗&lt;/span&gt;　代码效果：<span style="font-weight:bold">字体加粗</span></div></div>　
    <div><span class="redb">font-style: italic</span>：斜体
        <div>代码示例：&lt;span style="<span class="red">font-style: italic</span>"&gt;斜体&lt;/span&gt;　代码效果：<span style="font-style: italic">斜体</span></div></div>　
    <div><span class="redb">font-family</span>：字体
        <div>代码示例：&lt;span style="<span class="red">font-family:新宋体</span>"&gt;新宋体&lt;/span&gt;　代码效果：<span style="font-family:新宋体">新宋体</span></div></div>　
    <div><span class="redb">font-size</span>：字体大小
        <div>代码示例：&lt;span style="<span class="red">font-size:18px</span>"&gt;字体大小&lt;/span&gt;　代码效果：<span style="font-size:18px">字体大小</span></div></div>
</fieldset><br/>

    <fieldset><legend>对齐方式-(水平方向)</legend>
    <p style="font-weight: bold">　水平[文本及行级元素]：<span class="redb">text-align:</span> center(居中)、right(居右)、left(居左，默认值)</p>
    <div>　　代码示例：<pre>
        &lt;p style="border:1px solid gray;<span class="red">text-align: center;</span>margin-left: 10px;margin-right:400px"&gt;居中的代码效果&lt;/p&gt;
        &lt;p style="border:1px solid gray;<span class="red">text-align:right;</span>margin-left: 10px;margin-right:400px"&gt;居右的代码效果&lt;/p&gt;
    </pre></div>
    <div>　　代码效果：</div>
    <p style="border:1px solid gray;text-align: center;margin-left: 10px;margin-right:400px">居中的代码效果</p>
    <p style="border:1px solid gray;text-align:right;margin-left: 10px;margin-right:400px">居右的代码效果</p>
    <p style="font-weight: bold">　水平[块级元素]：<span class="redb">margin:0 auto</span></p>
    <div>　　代码示例：</div>
        <pre>
        &lt;div style="height: 51px;width: 680px; border: 1px solid gray; margin-left: 10px"&gt;
        &lt;div style="width: 200px; height: 50px;border: 1px solid gray;margin:0 auto;<span class="red">text-align: center;</span>"&gt;块级元素div&lt;/div&gt;&lt;/div&gt;
        </pre>
    <div>　　代码效果：</div>
    <div style="height: 51px;width: 680px; border: 1px solid gray; margin-left: 10px">
            <div style="width: 200px; height: 50px;border: 1px solid gray;margin:0 auto;text-align: center;">块级元素div</div></div>
</fieldset><br/>
<fieldset><legend>对齐方式-(垂直方向)</legend>
    <p style="font-weight: bold">　垂直[文本及行级元素]：<span class="redb">line-height</span>通过设置相同的行高来实现垂直居中</p>
    <div>　　代码示例：</div>
    <pre>
    &lt;p  style="height: 30px;background-color:coral;margin-left: 10px;margin-right:400px"&gt;我是P文本&lt;span&gt;我是未设置行高的行级span&lt;/span&gt;&lt;/p&gt;
    &lt;p  style="height: 30px;background-color:coral;margin-left: 10px;margin-right:400px"&gt;我是P文本&lt;span style="<span class="red">line-height: 30px</span>"&gt;我是已设置行高的行级span&lt;/span&gt;</p>
    </pre>
    <div>　　代码效果：</div>
    <p  style="height: 30px;background-color:coral;margin-left: 10px;margin-right:400px">我是P文本<span>我是未设置行高的行级span</span></p>
    <p  style="height: 30px;background-color:coral;margin-left: 10px;margin-right:400px">我是P文本<span style="line-height: 30px">我是已设置行高的行级span</span></p>
    <p style="font-weight: bold">　垂直[块级元素]：没有直接的标签设定</p>
</fieldset><br/>
<fieldset><legend>文本修饰样式</legend><br/>
    <div style="font-weight: bold">　下划线：<span class="redb">text-decoration: underline</span></div>
    <div>　代码示例：&lt;span style='<span class="red">text-decoration: underline</span>'&gt;下划线&lt;/span&gt;代码效果：<span style='text-decoration: underline'>下划线</span></div>　
    <div style="font-weight: bold">　上划线：<span class="redb">text-decoration:overline</span></div>
    <div>　代码示例：&lt;span style='<span class="red">text-decoration:overline</span>'&gt;上划线&lt;/span&gt;代码效果：<span style='text-decoration:overline'>上划线</span></div>　
    <div style="font-weight: bold">　上划线：<span class="redb">text-decoration:line-through</span></div>
    <div>　代码示例：&lt;span style='<span class="red">text-decoration:line-through</span>'&gt;删除线&lt;/span&gt;代码效果：<span style='text-decoration:line-through'>删除线</span></div>
    <br/><hr/>
    <p style="font-weight: bold">　关于文本折行</p>
    <div style="font-weight: bold"> 　文本折行（即使不写样式默认为折行）：<span class="redb">white-space: normal</span></div><br/>
    <div>　代码示例：
        <pre>　&lt;div style="width:200px;height: 100px;border: 1px solid gray;margin-left: 15px;<span class="red">white-space: normal</span>"&gt;</pre>
        <pre>　　折行折行折行折行折行折行折行折行折行折行折行折行折行折行&lt;/div&gt;&lt;/div&gt;</pre></div>
    <div>　代码效果：<div style="width: 200px;height: 100px;border: 1px solid gray;margin-left: 15px;white-space: normal">折行折行折行折行折行折行折行折行折行折行折行折行折行折行</div></div>
    <br/>
    <div style="font-weight: bold"> 　文本折行（即使不写样式默认为折行）：<span class="redb">white-space:nowrap</span></div><br/>
    <div>　代码示例：
        <pre>　&lt;div style="width:200px;height: 100px;border: 1px solid gray;margin-left: 15px;<span class="red">white-space:nowrap</span>"&gt;</pre>
            <pre>　　不折行不折行不折行不折行不折行不折行不折行不折行不折行&lt;/div&gt;&lt;/div&gt;</pre></div>
    <div>　代码效果：<div style="width: 200px;height: 100px;border: 1px solid gray;margin-left: 15px;white-space:nowrap">不折行不折行不折行不折行不折行不折行不折行不折行不折行</div></div>
<p>　　注：如果文本不折行，文本看不到的时候，那么浏览器会自动加上滚动条 </p>
</fieldset>
<fieldset><legend>控制文本溢出：overflow</legend>
    <div><span class="redb">overflow: hidden</span>：隐藏溢出文字</div>
    <div class="f-w">代码示例</div>
    <pre>
    &lt;div class="f-w">未隐藏&lt;/div&gt;
    &lt;div style="width: 150px;height: 50px;border: 1px solid gray"&gt;
    （无论选不选择择折行时，文字过多溢出文本框，使用hidden隐藏溢出文字）多余的文字 多余的文字&lt;/div&gt;
    &lt;br/&gt;&lt;br/&gt;&lt;br/&gt;
    &lt;div class="f-w"&gt;已隐藏&lt;/div&gt;
        &lt;div style="width: 150px;height: 50px;border: 1px solid gray;<span class="red">overflow: hidden</span>;"&gt;
    （无论选不选择择折行时，文字过多超出文本框，使用hidden隐藏多余文字）多余的文字 多余的文字&lt;/div&gt;
    </pre>
    <div class="f-w">代码效果：</div>
    <div class="f-w">未隐藏</div>
    <div style="width: 150px;height: 50px;border: 1px solid gray">（无论选不选择择折行时，文字过多溢出文本框，使用hidden隐藏溢出文字）多余的文字 多余的文字</div>
   <br/><br/>
    <br/><div class="f-w">已隐藏</div>
    <div style="width: 150px;height: 50px;border: 1px solid gray;overflow: hidden;">（无论选不选择择折行时，文字过多超出文本框，使用hidden隐藏多余文字）多余的文字 多余的文字</div>
<br/><hr/>
    <div><span class="redb">overflow: scroll</span>：出现滚动条</div>
    <div class="f-w">代码示例</div>
    <pre>
    &lt;div style="width: 150px;height: 50px;border: 1px solid gray;<span class="red">overflow:scroll</span>;"&gt;
        （无论文字有没有溢出文本框，使用scroll，出现滚动条）&lt;/div&gt;
    </pre>
    <div class="f-w">代码效果：</div>
    <div style="width: 150px;height: 50px;border: 1px solid gray;overflow:scroll;">（无论文字有没有溢出文本框，使用scroll，出现滚动条）</div>
<br/><hr/>
    <div><span class="redb">overflow:auto</span>：自动判断出现滚动条</div>
    <div class="f-w">代码示例</div>
    <pre>
    &lt;div class="f-w">未溢出&lt;/div&gt;
    &lt;div style="width: 150px;height: 50px;border: 1px solid gray;<span class="red">overflow:auto</span>;"&gt;（自动判断文字是否需要滚动条）&lt;/div&gt;
    &lt;div class="f-w"&gt;文字溢出&lt;/div&gt;
    &lt;div style="width: 150px;height: 50px;border: 1px solid gray;<span class="red">overflow:auto</span>;"&gt;（自动判断文字是否需要滚动条） 当文字溢出时 当文字溢出溢出溢出溢出&lt;/div&gt;
  </pre>
    <div class="f-w">代码效果</div>
    <div class="f-w">未溢出</div>
    <div style="width: 150px;height: 50px;border: 1px solid gray;overflow:auto;">（自动判断文字是否需要滚动条）</div>
    <div class="f-w">文字溢出</div>
    <div style="width: 150px;height: 50px;border: 1px solid gray;overflow:auto;">（自动判断文字是否需要滚动条） 当文字溢出时 当文字溢出溢出溢出溢出</div>
<br/>
    <div>　scroll的设定会有横向和纵向两个滚动条，使用<span class="red">overflow-x</span>与<span class="red">overflow-y</span>，可以设定单独的横向或纵向滚动条</div>
</fieldset>
</body>
</html>